﻿<UserControl xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Extended"
    x:Class="SilverlightApplication1.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ScrollViewer>
        <Grid x:Name="LayoutRoot" ShowGridLines="False" Style="{StaticResource BackGrid}">
            <Grid.RowDefinitions>
                <RowDefinition Height="1.3*"/>
                <RowDefinition Height="10*"/>
                <RowDefinition Height="0.6*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1.5*"/>
                <ColumnDefinition Width="6*"/>
                <ColumnDefinition Width="1.2*"/>
                <ColumnDefinition Width="2*"/>
            </Grid.ColumnDefinitions>
            
            <!-- LAYOUTROOT - Row=0 , Column=0 -->
            <!-- Amazon SignIn controls -->
            <Grid x:Name="SignIn" ShowGridLines="False">
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.6*"/>
                    <RowDefinition Height="0.6*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock x:Name="AmazonKey" Grid.Column="0" Grid.Row="0" Text="Amazon Key" Foreground="Black"
                        FontSize="11" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Verdana"/>
                <TextBox x:Name="Key" Grid.Column="0" Grid.Row="1" Margin="5,0,5,0" FontSize="11" FontFamily="Verdana"/>
                <HyperlinkButton Grid.Row="2" Grid.Column="0" Foreground="SteelBlue"
                         HorizontalAlignment="Center" Content="Sign In" FontFamily="Verdana"/>
            </Grid>

            <!-- LayoutRoot - Row=0 , Column=1 -->
            <TextBox x:Name="txtQuery" Grid.Column="1" Height="20" VerticalAlignment="Bottom" Margin="5"
                     FontFamily="Verdana"
                     KeyDown="txtQueryKeyDown"/>

            <!-- LayoutRoot - Row=0 , Column=2 -->
            <Button x:Name="btnSearch" Content="Search" Click="Search_Click" Grid.Column="2" Height="20"
                HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="7,5,5,5" MaxWidth="100"
                FontFamily="Verdana" Style="{StaticResource BackButtonSimple}"/>

            <!-- LayoutRoot - Row=0 , Column=3 -->
            <HyperlinkButton x:Name="hlnkAdvSearch" Content="Advanced Search" Click="Advanced" Margin="5"
                         Grid.Column="3"  VerticalAlignment="Bottom" HorizontalAlignment="Left"
                         FontFamily="Verdana" Foreground="White"/>

            <!-- LayoutRoot - Row=1 , Column=0 -->
            <!-- Contains buttons to choose the option CONDITION of advanced search -->
            <Grid x:Name="grdButtons" Grid.Row="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.Resources>
                    <!-- Storyboard used by buttons in grid at the Left (MouseEnter event) -->
                    <Storyboard x:Name="renderBigger" SpeedRatio="4">
                        <DoubleAnimation Storyboard.TargetProperty="(ScaleTransform.ScaleX)" From="1" To="1.5"/>
                        <DoubleAnimation Storyboard.TargetProperty="(ScaleTransform.ScaleY)" From="1" To="1.5"/>
                    </Storyboard>
                    <!-- Storyboard used by buttons in grid at the Left (MouseLeave event) -->
                    <Storyboard x:Name="renderLower" SpeedRatio="4">
                        <DoubleAnimation Storyboard.TargetProperty="(ScaleTransform.ScaleX)" From="1.5" To="1"/>
                        <DoubleAnimation Storyboard.TargetProperty="(ScaleTransform.ScaleY)" From="1.5" To="1"/>
                    </Storyboard>
                </Grid.Resources>
                <!-- Books -->
                <Button x:Name="btnBooks" VerticalAlignment="Center" Margin="2" Width="75" Height="75"
                    MouseEnter="btnBooksToBigger" MouseLeave="btnBooksToLower"
                    FontFamily="Verdana">
                    <Button.RenderTransform>
                        <ScaleTransform x:Name="rdrBooks" ScaleX="1" ScaleY="1"/>
                    </Button.RenderTransform>
                    <Button.Content>
                        <Image x:Name="imgBooks" Source="images/imgLibros.jpg"/>
                    </Button.Content>
                    <Button.Clip>
                        <EllipseGeometry x:Name="egBooks" RadiusX="30" RadiusY="30" Center="37.5,37.5"/>
                    </Button.Clip>
                </Button>
                <!-- About... -->
                <Button x:Name="btnAbout1" Grid.Row="1" VerticalAlignment="Center" Margin="2"
                        Width="75" Height="75" MouseEnter="btnAbout1ToBigger" MouseLeave="btnAbout1ToLower"
                        FontFamily="Verdana" Style="{StaticResource BackButtonSimple}">
                    <Button.RenderTransform>
                        <ScaleTransform x:Name="rdrAbout1" ScaleX="1" ScaleY="1"/>
                    </Button.RenderTransform>
                    <Button.Clip>
                        <EllipseGeometry x:Name="egAbout1" RadiusX="30" RadiusY="30" Center="37.5,37.5"/>
                    </Button.Clip>
                </Button>
                <!-- About... -->
                <Button x:Name="btnAbout2" Grid.Row="2" VerticalAlignment="Center" Margin="2"
                        Width="75" Height="75" MouseEnter="btnAbout2ToBigger" MouseLeave="btnAbout2ToLower"
                        FontFamily="Verdana" Style="{StaticResource BackButton}">
                    <Button.RenderTransform>
                        <ScaleTransform x:Name="rdrAbout2" ScaleX="1" ScaleY="1"/>
                    </Button.RenderTransform>
                    <Button.Clip>
                        <EllipseGeometry x:Name="egAbout2" RadiusX="30" RadiusY="30" Center="37.5,37.5"/>
                    </Button.Clip>
                </Button>
            </Grid>
            
            <!-- LayoutRoot - Row=1 , Column=1 -->
            <!-- The items will be loaded on code behind -->
            <ListBox x:Name="lstResult" Grid.Column="1" Grid.Row="1" Margin="5" Visibility="Collapsed"
                     FontFamily="Verdana">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel x:Name="stkAll" Orientation="Horizontal" >
                            <!-- Thumbnail Preview -->
                            <Image x:Name="imgMed" Source="{Binding MediumImage}" MouseLeftButtonDown="ShowItemInformation"/>

                            <!-- Info -->
                            <StackPanel Orientation="Vertical">
                                <TextBlock Text="{Binding Author}"/>
                                <TextBlock Text="{Binding Title}"/>
                                <TextBlock Text="{Binding Publisher}"/>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="Price: "/>    
                                    <TextBlock Text="{Binding CurrencyCode}"/>
                                    <TextBlock Text=" "/>
                                    <TextBlock Text="{Binding FormattedPrice}"/>
                                </StackPanel>
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
            
            <!-- Explode with ListItem information  -->
            <Grid x:Name="grdLstItemInfo" Grid.Column="1" Grid.Row="1" Margin="5,5,5,5"
                  Height="0" Width="0" HorizontalAlignment="Center" VerticalAlignment="Center"
                  Background="Transparent" Opacity="0.8">
                <Grid.Resources>
                    <!-- Storyboard used to show more Item Information (MouseLeftButtonDown event) -->
                    <Storyboard x:Name="infoItemVisible" Storyboard.TargetName="grdLstItemInfo" SpeedRatio="7" Duration="00:00:05.00">
                        <DoubleAnimation Storyboard.TargetProperty="(Grid.Height)" By="150" From="0" To="400"/>
                        <DoubleAnimation Storyboard.TargetProperty="(Grid.Width)" By="100" From="0" To="450"/>
                    </Storyboard>
                    <!-- Inverse method of the storyboard above (MouseLeave event) -->
                    <Storyboard x:Name="infoItemNotVisible" Storyboard.TargetName="grdLstItemInfo" SpeedRatio="7" Duration="00:00:05.00">
                        <DoubleAnimation Storyboard.TargetProperty="(Grid.Height)" By="150" To="0"/>
                        <DoubleAnimation Storyboard.TargetProperty="(Grid.Width)" By="100" To="0"/>
                    </Storyboard>
                </Grid.Resources>
                
                <Border CornerRadius="15" Background="SteelBlue" Margin="10">
                    <Grid Background="SteelBlue" Margin="5">
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="2*"/>
                        </Grid.ColumnDefinitions>
                        <!-- This information will be loaded on code behind -->
                        <Button x:Name="btnCloseItemInformation" Grid.Column="1" Margin="0,2,2,0" Background="Black"
                                Height="15" Width="15" VerticalAlignment="Top" HorizontalAlignment="Right"
                                Content="X" FontSize="10" Foreground="Black" TextAlignment="Center"
                                Click="CloseItemInformation"/>
                        <Image x:Name="imgItemInformation" VerticalAlignment="Bottom" HorizontalAlignment="Center"
                               Margin="5" Source="images/imgHarryGrande.jpg"/>
                        <TextBlock x:Name="txtItemInfo1" Grid.Column="1" HorizontalAlignment="Left" Margin="0,20,0,0"
                                   FontFamily="Verdana" FontSize="26" Foreground="White"
                                   Text="Harry Potter" TextAlignment="Center"/>
                        <TextBlock x:Name="txtItemInfo2" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Bottom"
                                   FontFamily="Verdana" FontSize="18" Foreground="Azure"
                                   Text="Reload" TextAlignment="Center"/>
                        <TextBlock x:Name="txtItemInfo3" Grid.Row="1" Grid.ColumnSpan="2"
                                   HorizontalAlignment="Left" VerticalAlignment="Center"
                                   FontFamily="Verdana" FontSize="18" Foreground="Black"
                                   Text="More Information!!!!!!!!!!!!!!!!" TextAlignment="Center"/>  
                    </Grid>     
                </Border>
            </Grid>

            <!-- LayoutRoot - Row=1 , Column=2 y Column=3 -->
            <!-- Advanced Search  -->   
            <Grid x:Name="AdvContainer" Grid.Column="2" Grid.Row="1" Grid.ColumnSpan="2" Margin="5,5,5,5"
                  Height="Auto" Width="Auto">
            <Grid x:Name="grdAdvSearch" Height="0" Width="0"
                  ShowGridLines="False" HorizontalAlignment="Right" VerticalAlignment="Center"
                  Opacity="0.7"> <!---->
                        <!-- Using Expression Blend with the property Brushes->Background -->
                    <Grid.Background>
                        <!-- The brushes is based on "SteelBlue"="#FF4682B4" -->
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FF4682B4"/>            <!-- Top -->
                            <GradientStop Color="#FFF0FFFF" Offset="1"/> <!-- Bottom -->
                            <GradientStop Color="#FF4A86B9" Offset="0.464"/>
                            <GradientStop Color="#FF4784B7" Offset="0.317"/>
                            <GradientStop Color="#FFCDD7F0" Offset="0.857"/>
                        </LinearGradientBrush>
                    </Grid.Background>
                    <Grid.Resources>
                        <!-- Storyboard used to show Advanced Information (HyperlinkButton) -->
                        <Storyboard x:Name="toVisible" Storyboard.TargetName="grdAdvSearch"
                                    SpeedRatio="7" Duration="00:00:05.00">
                            <DoubleAnimation Storyboard.TargetProperty="(Grid.Height)" By="150" From="0" To="460"/>
                            <DoubleAnimation Storyboard.TargetProperty="(Grid.Width)" By="100" From="0" To="290"/>
                        </Storyboard>
                        <!-- Inverse method of the storyboard above (HyperlinkButton) -->
                        <Storyboard x:Name="toNotVisible" Storyboard.TargetName="grdAdvSearch"
                                    SpeedRatio="7" Duration="00:00:05.00">
                            <DoubleAnimation Storyboard.TargetProperty="(Grid.Height)" By="150" To="0"/>
                            <DoubleAnimation Storyboard.TargetProperty="(Grid.Width)" By="100" To="0"/>
                        </Storyboard>
                    </Grid.Resources>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="3*"/>
                    <RowDefinition Height="6*"/>
                    <RowDefinition Height="0.6*"/>
                </Grid.RowDefinitions>
                <!-- grdAdvSearch - Row=0 , Column=0 -->
                <TextBlock x:Name="lblAdvanced" Grid.Row="0" VerticalAlignment="Bottom"
                           HorizontalAlignment="Center" Margin="5,5,5,5" Text="Advanced Search"
                           TextAlignment="Center" FontFamily="Verdana" FontSize="16" Foreground="Azure"/>   
                <!-- grdAdvSearch - Row=1 , Column=0 -->
                <Grid x:Name="grdSort" Grid.Row="1" ShowGridLines="False" Margin="2">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>   
                        <RowDefinition Height="*"/> 
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>   
                    <!-- Title: Sort by -->
                    <TextBlock x:Name="txtSort" Grid.Row="0" Grid.ColumnSpan="2" Margin="3,0,3,0"
                               HorizontalAlignment="Left" VerticalAlignment="Bottom"
                               Text="Sort by" TextAlignment="Left" FontFamily="Verdana" FontSize="14" FontStyle="Italic"/>
                    <!-- List Price -->
                    <RadioButton x:Name="rbtPrice" Grid.Row="1" Grid.Column="0" Margin="3" GroupName="grpSort"
                                 VerticalAlignment="Center" HorizontalAlignment="Left"
                                 Content="List Price" FontFamily="Verdana" FontSize="12"/>
                    <!-- Publication Date -->
                    <RadioButton x:Name="rbtPublDate" Grid.Row="2" Grid.Column="0" Margin="3" GroupName="grpSort"
                                 VerticalAlignment="Center" HorizontalAlignment="Left"                             
                                 Content="Publication Date" FontFamily="Verdana" FontSize="12"/>    
                    <!-- Title -->
                    <RadioButton x:Name="rbtTitle" Grid.Row="3" Grid.Column="0" Margin="3" GroupName="grpSort"
                                 VerticalAlignment="Center" HorizontalAlignment="Left"
                                 Content="Title" FontFamily="Verdana" FontSize="12"/>
                    <!-- Ascending Order -->
                    <RadioButton x:Name="rbtAsc" Grid.Row="1" Grid.Column="1" Margin="3" GroupName="grpOrder"
                                 VerticalAlignment="Center" HorizontalAlignment="Left"
                                 Content="Ascending" FontFamily="Verdana" FontSize="12"/>
                    <!-- Descending Order -->
                    <RadioButton x:Name="rbtDesc" Grid.Row="2" Grid.Column="1" Margin="3" GroupName="grpOrder"
                                 VerticalAlignment="Center" HorizontalAlignment="Left"
                                 Content="Descending" FontFamily="Verdana" FontSize="12"/>
                </Grid>
                
                <!-- grdAdvSearch - Row=2 , Column=0 -->
                <!--  Filtered By  -->
                <Grid x:Name="grdFiltered" Grid.Row="2" Background="Transparent"  ShowGridLines="False" Margin="3">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="8*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="8*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions> 
                    <!-- Title: Filtered By  -->
                    <TextBlock x:Name="txtFiltered" Grid.Row="0" Grid.ColumnSpan="2" Margin="3,0,3,0"
                               HorizontalAlignment="Left" VerticalAlignment="Center"
                               Text="Filtered by" TextAlignment="Left"
                               FontFamily="Verdana" FontSize="14" FontStyle="Italic"/>
                    <!-- Filtered by Information -->
                    <Grid x:Name="grdFilteredOptions" Grid.Row="1" Background="Transparent" ShowGridLines="False">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="3*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>            
                        <!--  Author -->
                        <TextBlock x:Name="lblAuthor" Grid.Row="0" Margin="3,0,3,0"
                               HorizontalAlignment="Left" VerticalAlignment="Center"
                               Text="Author:" TextAlignment="Left" FontFamily="Verdana" FontSize="10"/>
                        <TextBox x:Name="txtAuthor" Grid.Row="0" Grid.Column="1"
                                 HorizontalAlignment="Stretch" VerticalAlignment="Center"
                                 TextAlignment="Left" FontFamily="Verdana" FontSize="10"/>
                        <!--  Publisher -->
                        <TextBlock x:Name="lblpublisher" Grid.Row="1" Margin="3,0,3,0"
                               HorizontalAlignment="Left" VerticalAlignment="Center"
                               Text="Publisher:" TextAlignment="Left" FontFamily="Verdana" FontSize="10"/>
                        <TextBox x:Name="txtPublisher" Grid.Row="1" Grid.Column="1" 
                                 HorizontalAlignment="Stretch" VerticalAlignment="Center"
                                 TextAlignment="Left" FontFamily="Verdana" FontSize="10"/>
                        <!--  Title -->
                        <TextBlock x:Name="lblTitle" Grid.Row="2" Margin="3,0,3,0"
                               HorizontalAlignment="Left" VerticalAlignment="Center"
                               Text="Title:" TextAlignment="Left" FontFamily="Verdana" FontSize="10"/>
                        <TextBox x:Name="txtTitle" Grid.Row="2" Grid.Column="1" 
                                 HorizontalAlignment="Stretch" VerticalAlignment="Center"
                                 TextAlignment="Left" FontFamily="Verdana" FontSize="10"/>
                        <!--  Category -->
                        <TextBlock x:Name="lblCategory" Grid.Row="3" Margin="3,0,3,0"
                               HorizontalAlignment="Left" VerticalAlignment="Center"
                               Text="Category:" TextAlignment="Left" FontFamily="Verdana" FontSize="10"/>
                        <TextBox x:Name="txtCategory" Grid.Row="3" Grid.Column="1" 
                                 HorizontalAlignment="Stretch" VerticalAlignment="Center"
                                 TextAlignment="Left" FontFamily="Verdana" FontSize="10"/>
                        <!--  Codition -->
                        <Grid Grid.Row="4" Grid.ColumnSpan="2" Margin="3,0,3,0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions> 
                        <TextBlock x:Name="lblCondition"
                               HorizontalAlignment="Left" VerticalAlignment="Center"
                               Text="Condition:" TextAlignment="Left" FontFamily="Verdana" FontSize="10"/>
                        <CheckBox x:Name="chkUsed" Grid.Column="1"
                                  VerticalAlignment="Center" HorizontalAlignment="Left"
                                  Content="Used" TextAlignment="Left" FontFamily="Verdana" FontSize="10"/>
                        <CheckBox x:Name="chkCollectible" Grid.Row="1" Grid.Column="1"
                                  VerticalAlignment="Center" HorizontalAlignment="Left"
                                  Content="Collectible" TextAlignment="Left" FontFamily="Verdana" FontSize="10"/>
                        <CheckBox x:Name="chkRefurbished" Grid.Row="2" Grid.Column="1"
                                  VerticalAlignment="Center" HorizontalAlignment="Left"
                                  Content="Refurbished" TextAlignment="Left" FontFamily="Verdana" FontSize="10"/>
                        </Grid>
                        <!--  Keyword -->
                        <TextBlock x:Name="lblKeyword" Grid.Row="5" Margin="3,0,3,0"
                               HorizontalAlignment="Left" VerticalAlignment="Center"
                               Text="Keyword:" TextAlignment="Left" FontFamily="Verdana" FontSize="10"/>
                        <TextBox x:Name="txtKeyword" Grid.Row="5" Grid.Column="1" 
                                 HorizontalAlignment="Stretch" VerticalAlignment="Center"
                                 TextAlignment="Left" FontFamily="Verdana" FontSize="10"/>
                        <!--  MaxPrice -->
                        <TextBlock x:Name="lblMaxPrice" Grid.Row="6" Margin="3,0,3,0"
                               HorizontalAlignment="Left" VerticalAlignment="Center"
                               Text="Maximum Price:" TextAlignment="Left" FontFamily="Verdana" FontSize="10"/>
                        <TextBox x:Name="txtMaxPrice" Grid.Row="6" Grid.Column="1"
                                 HorizontalAlignment="Stretch" VerticalAlignment="Center"
                                 TextAlignment="Left" FontFamily="Verdana" FontSize="10"/>
                        <!--  MinPrice -->
                        <TextBlock x:Name="lblMinPrice" Grid.Row="7" Margin="3,0,3,0"
                               HorizontalAlignment="Left" VerticalAlignment="Center"
                               Text="Minimum Price:" TextAlignment="Left" FontFamily="Verdana" FontSize="10"/>
                        <TextBox x:Name="txtMinPrice" Grid.Row="7" Grid.Column="1"
                                 HorizontalAlignment="Stretch" VerticalAlignment="Center"
                                 TextAlignment="Left" FontFamily="Verdana" FontSize="10"/>
                    </Grid>
                </Grid>
                <!-- Confirmation button whith right margin taking center as reference  -->
                <!-- This button Confirm all changes in Advanced Search -->
                <Button x:Name="btnConfirm" Grid.Row="3" Margin="0,0,45,0" Height="26" Width="26"
                        MouseEnter="btnConfirmToLight" MouseLeave="btnConfirmToDark" Click="Advanced">
                    <!-- Shows the button as an Ellipse -->
                    <Button.Clip>
                        <!-- We don't want to show the button border, so ElipseRadius < 2*(Height or Width) -->
                        <EllipseGeometry RadiusX="8" RadiusY="8" Center="13,13"/>
                    </Button.Clip>
                    <Button.Content>
                        <!-- Use Grid container let's maintain two images and then change their visibility on code behind -->
                        <Grid x:Name="imgsGreen">
                            <Image x:Name="imgDarkGreen" Source="images/button1_0.jpg" Height="26" Width="26"
                                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            <Image x:Name="imgLightGreen" Source="images/button1_1.jpg" Height="26" Width="26"
                                   HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Collapsed"/>
                        </Grid>
                    </Button.Content>
                </Button>
                <!-- Cancel button whith left margin taking center as reference -->
                <!-- This button Cancel all changes in Advanced Search -->
                <Button x:Name="btnCancel" Grid.Row="3" Height="26" Width="26" Margin="20,0,0,0"
                        MouseEnter="btnCancelToLight" MouseLeave="btnCancelToDark" Click="Advanced">
                    <!-- Shows the button as an Ellipse -->
                    <Button.Clip>
                        <!-- We don't want to show the button border, so ElipseRadius < 2*(Height or Width) -->
                        <EllipseGeometry RadiusX="8" RadiusY="8" Center="13,13"/>
                    </Button.Clip>
                    <Button.Content>
                        <!-- Use Grid container let's maintain two images and then change their visibility on code behind -->
                        <Grid x:Name="imgsRed">
                            <Image x:Name="imgDarkRed" Source="images/buttonr_0.jpg" Height="26" Width="26"
                                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            <Image x:Name="imgLightRed" Source="images/buttonr_1.jpg" Height="26" Width="26"
                                   HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Collapsed"/>
                        </Grid>
                    </Button.Content>
                </Button>
            </Grid>
            </Grid>            
        </Grid>
    </ScrollViewer>
</UserControl>
